<template>
    <div class="noticeList">
        <div class="my-header"></div>
        <div class="listmain">
            <PullRefreshList
                v-model:refreshing="refreshing"
                v-model:loading="loading"
                v-model:finished="finished"
                v-model:list="list"
                @load="onLoad"
            >
                <van-cell
                    v-for="(item, index) in list"
                    :key="index"
                    :title="`墓穴位置：${item.address}`"
                    center
                    @click="routerPush(item)"
                >
                    <template #label>
                        <div>操作时间：{{ item.a_dat6.split(' ')[0] }}</div>
                        <div>联系人：{{ item.a_ex2 }}</div>
                        <div>联系电话：{{ item.a_ex3 }}</div>
                        <!-- <div>墓穴位置：{{ item.address }}</div> -->
                        <div>续费年数：{{ item.a_ex5 }}</div>
                        <div>管理费开始时间：{{ item.a_dat1.split(' ')[0] }}</div>
                        <div>管理费结束时间：{{ item.a_dat2.split(' ')[0] }}</div>
                    </template>
                    <!-- <template #value>
                        <van-button 
                            type="primary" 
                            size="mini"
                            @click.stop="cancel(item)"
                        >
                            取消预约
                        </van-button>
                    </template> -->
                </van-cell>
            </PullRefreshList>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount } from 'vue';
    import type { Ref } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { showDialog, showConfirmDialog, showLoadingToast, closeToast } from 'vant';
    import PullRefreshList from '@/components/pullRefreshList/PullRefreshList.vue';
    import { FHSXFJLApi, getCancellationRecordApi } from '@/apis';
    import { useWeixinLogin3 } from '@/hooks';

    useWeixinLogin3('renewalRecord');

    const router = useRouter();
    const route = useRoute();

    import { useStore } from '@/store';
    const store = useStore();

    const list: Ref<Array<any>> = ref([]);
    const loading: Ref<boolean> = ref(false);
    const finished: Ref<boolean> = ref(false);
    const refreshing: Ref<boolean> = ref(true);
    const onLoad = async (callback) => {
        if (store.wxOpenid) {
            let val: any = await FHSXFJLApi({
                openid: store.wxOpenid,
            });
            list.value.push(...val);
            console.log(val);
            console.log(list.value);
        }
        callback(true);
    };
    const routerPush = (val) => {
        // 后面看是跳转还是什么
    };
    const cancel = (val) => {
        showConfirmDialog({
            title: '提示',
            message: '确定取消预约？',
        })
            .then(() => {
                showLoadingToast({
                    message: '加载中...',
                    forbidClick: true,
                    duration: 0,
                });
                getCancellationRecordApi({
                    sh_id: val.id,
                })
                    .then(async (res) => {
                        closeToast();
                        list.value = [];
                        loading.value = true;
                        finished.value = false;
                        let val = await FHSXFJLApi({
                            openid: store.wxOpenid,
                        });
                        list.value.push(...val);
                        loading.value = false;
                        finished.value = true;
                    })
                    .catch((err) => {
                        closeToast();
                    });
            })
            .catch((err) => {});

        console.log(val);
    };
</script>

<style lang="scss" scoped>
    .noticeList {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .my-header {
        display: flex;
        justify-content: center;
        background: url(@/assets/img/policy/policybg.png) no-repeat;
        background-size: 100% 90%;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .my-header::after {
        content: '';
        width: 95%;
        height: 185px;
        margin-top: 20px;
        background: url(@/assets/img/banner/gmjs_bg.png);
        background-size: 100% 100%;
        border-radius: 5px;
    }

    .my-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* justify-content: center; */
    }

    .maindiv {
        width: 90%;
        /* border: 1px solid #2C3E50; */
        box-shadow: 0px 0px 5px 5px #e3eee9;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 25px;
    }

    .maindivfont1 {
        color: #333333;
        font-size: 12pt;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .maindivfont2 {
        color: #666666;
        font-size: 10pt;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .listmain {
        flex: 1;
        overflow: auto;
    }
</style>
